{% extends "layout.html" %}


{% block body %}

<div class="container">
        <div class="row">


                <form method=POST action="{{ url_for('learnmode') }}" >

                 <div >     
                        <button type="submit" class= "btn btn-info btn-block  " name="learnmode" value=True  >Learnmode</button>
                     </div> 
                </form>

        </div>

                                   <div class="row " >
            <audio  class="col-xs-8 col-sm-8 col-md-8 col-lg-8 " id="artical_Music"   controls="controls"  preload="auto" type="audio/mp3" autoplay="autoplay" ></audio> 
                              
                          </div>
<div>
    <textarea id="input_text" name="input_text" class="form-control" rows="24" placeholder="Enter text here" maxlength="6144" aria-label="Text" style="padding:2px 2px 2px;border: 1px solid blue;"></textarea>
</div>
   <div class="row"  style="padding:2px 2px 2px;">
    

                <span class="text-responsible" id="artical_out" style="padding:2px 2px 2px;"></span>
              </div>  

                <form id ="mySearch" class="bs-example bs-example-form" role="form"  method = "POST">

                  <div class="row " >

                    <button type="submit" class= "btn btn-info col-xs-2 col-sm-2 col-md-2 col-lg-2  " id = "artical_input" >Input</button> 
            
                        <button type="submit" class= "btn btn-info col-xs-2 col-sm-2 col-md-2 col-lg-2  " id = "artical_input_ok" >OK</button>                    
                  </div>
                

          


                
            </form>
           

 




 <ul class="list-group" style=" overflow-y:scroll;overflow-x:hidden;list-style-type:none">

        <li  class="list-group-item " id="li" style="" > 
    
                   <div class="row " style="padding: 2px 2px 2px;" >
                          <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6">
                          <p class="text-primary lead font-weight-bold "  preload="auto" id="word" style="zoom:150%;" ></p>
                          </div>           

                      <div class="float-right col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
                      <p class="text-muted " id="word_index"></p>
                      </div>                    
                  </div> 
                           <div class="row " >
                            <audio  class="col-xs-8 col-sm-8 col-md-8 col-lg-8 " id="wordMusic"   controls="controls"  preload="auto" type="audio/mp3" autoplay="autoplay" ></audio> 
                              
                          </div>
        
            <div class="row" style="padding:2px 2px 2px;">
             
                    <img class ="img-rounded img-responsive col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_a" >

                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_b" >
                 
          
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_c" >
                
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_d"  >
                           
             </div> 
            <div class="row"  style="padding:2px 2px 2px;">
               <span class="text-muted" > [Tips:]</span>

                <span class="text-responsible" id="word_tip" style="padding:2px 2px 2px;"></span>
              </div>  
             <div class="row" style="padding:2px 2px 2px;"> 
              <span class="text-muted"> [Defintion:]</span>
              <span class="text-responsible" id="word_def" > </span>
            </div>

            <div class="row" style="padding: 2px 2px 2px;">
                <div class="btn btn-info col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 2px 2px 2px;">
                    <a id="dict_mw" href="https://www.merriam-webster.com/dictionary/" > M-W</a>
                  
                </div>

                <div class="btn btn-info col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 2px 2px 2px;">
                <a id="dict_vo" href="https://www.vocabulary.com/dictionary/"> Voca</a>
                  
                </div>
                <div class="btn btn-info col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 2px 2px 2px;">
                 <a id="dict_bi" href="https://cn.bing.com/dict/search?q=" style="padding: 2px 2px 2px;"> Bing</a>
                  
                </div>
                  
   
            

      </div> 
            
         
        </li class="list-group">



   
 </ul>     

 

            <div  style="padding: 10px 10px 10px;">


              <div class="row">
                <button  class="btn disabled btn-block" >  Vocavola         </button>
             </div>

            </div>
         

</div>

<script  src="/static/js/artical_mode.js" type=text/javascript >

</script>

{% endblock %}

